<template>
	<view class="movie">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="navTitle">
			
			<view class="titleText">
				<img class="goback" src="~/static/icon/back.png" @click="goBack">
				<text>电视剧</text>
				<img class="search" src="~/static/icon/search.png" @click="search">
			</view>
		</view>
		<view class="movieType">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item"  v-for="(item,index) in orderList" :key="index" :class="{active:TabCur1==index}" @tap="tabSelect1(index, item)" :data-id="index">
					{{item.title}}
				</view>
			</scroll-view>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item"  v-for="(item,index) in extendAreaList" :key="index" :class="{active:TabCur2==index}" @tap="tabSelect2(index,item)" :data-id="index">
					{{item}}
				</view>
			</scroll-view>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item"  v-for="(item,index) in extendYearList" :key="index" :class="{active:TabCur3==index}" @tap="tabSelect3(index,item)" :data-id="index">
					{{item}}
				</view>
			</scroll-view>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item"  v-for="(item,index) in cateChild" :key="index" :class="{active:TabCur4==index}" @tap="tabSelect4(index,item)" :data-id="index">
					{{item.type_name}}
				</view>
			</scroll-view>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item"  v-for="(item,index) in stateList" :key="index" :class="{active:TabCur5==index}" @tap="tabSelect5(index,item)" :data-id="index">
					{{item.title}}
				</view>
			</scroll-view>
		</view>
			
		<!-- 影片 -->
		<view class="content">
			<view class="movie-item" v-for="(item,index) in movieList" :key="index" @click="getInfo(item)">
				<span>全{{item.vod_total}}集</span>
				<image :src="item.vod_pic" mode=""></image>
				<text class="text">{{item.vod_name}}</text>
				<!-- <view class="notice">
					<img src="~/static/icon/notice.png">
					<span>预告</span>
				</view> -->
			</view>
			<!-- <view class="loading" v-if="isLoading">
				<ul>
					<li></li>
					<li></li>
				</ul>
			</view> -->
		</view>
	
	</view>
</template>

<script>
	var typeid1=2, page=1,order=1,area='',year='',typeid=1,state=1,limit=12;
	export default{
		data(){
			return{
				TabCur1: 0,
				TabCur2: 0,
				TabCur3: 0,
				TabCur4: 0,
				TabCur5: 0,
				cateChild:[],
				orderList:[],
				extendAreaList:[],//地区
				extendYearList:[],//年代
				stateList:[],
				movieList:[],
				// isLoading:true,
			}
		},
		onLoad() {
			uni.request({
				url: 'http://221.234.36.126:82/api.php/Login/visitor_login',
				method: 'POST',
				data: {
					token: '1CECE2221211DDCB613882C3311EC670'
				},
				header: {
					'content-type': 'application/json;charset=UTF-8'
				},
				success: (res) => {
					// console.log(res);
					let visitor = res.data.data.hash;
					uni.request({
						url: 'http://221.234.36.126:82/api.php/Vod/get_vod_cate',
						method: 'POST',
						data: {
							token: '1CECE2221211DDCB613882C3311EC670',
							hash: visitor,
							type_id_1: 2,
						},
						header: {
							'content-type': 'application/json;charset=UTF-8'
						},
						success: (res) => {
							console.log(res.data)
							this.cateChild=res.data.data.cate_child
							this.orderList=res.data.data.order
							this.extendAreaList=res.data.data.vod_extend_area
							this.extendYearList=res.data.data.vod_extend_year
							this.stateList=res.data.data.vod_state
							uni.request({
								url: 'http://221.234.36.126:82/api.php/Vod/ajax_video',
								method: 'POST',
								data: {
									token: '1CECE2221211DDCB613882C3311EC670',
									hash: visitor,
									type_id_1: typeid1,
									limit:limit
								},
								header: {
									'content-type': 'application/json;charset=UTF-8'
								},
								success: (res) => {
									// console.log(res)
									this.movieList=res.data.list
								}
							})
						}
					})
				}
			});
		},
		// 上拉加载
		onReachBottom() {
			let _self = this
			page++
			uni.request({
				url: 'http://221.234.36.126:82/api.php/Vod/ajax_video',
				method: 'POST',
				data: {
					token: '1CECE2221211DDCB613882C3311EC670',
					page: page,
					type_id_1: typeid1,
					limit:limit
				},
				header: {
					'content-type': 'application/json;charset=UTF-8'
				},
				success: (res) => {
					// console.log(res.data)
					// if (res.data.list == "") {
					// 	uni.hideNavigationBarLoading();
					// 	_self.isLoading=false;
					// 	return false;
					// }
					_self.movieList = _self.movieList.concat(res.data.list);
					uni.hideNavigationBarLoading();
					
				}
			})
		},
		methods:{
			goBack(){
				uni.switchTab({
					url: "/pages/classes/classes",
				});
			},
			search(){
				uni.navigateTo({
					url: "/pages/search/search",
				});
			},
			// 影片详情页
			getInfo(item) {
				let vodId=item.vod_id
				uni.navigateTo({
					url: '/pages/videoInfo/videoInfo?id='+vodId
				});
			},
			tabSelect1(index, item) {
				var that = this
				this.TabCur1 = index
				let id = item.type_id
				order=item.order
				console.log(order)
				uni.request({
					url: 'http://221.234.36.126:82/api.php/Vod/ajax_video',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						type_id_1: typeid1,
						type_id:typeid,
						limit:limit,
						order:order,
						vod_extend_area:area,
						vod_extend_year:year,
						vod_state:state
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						// console.log(res)
						this.movieList=res.data.list
					}
				})
			},
			tabSelect2(index,item) {
				var that = this
				this.TabCur2 = index
				area=item
				uni.request({
					url: 'http://221.234.36.126:82/api.php/Vod/ajax_video',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						type_id_1: typeid1,
						type_id:typeid,
						limit:limit,
						order:order,
						vod_extend_area:area,
						vod_extend_year:year,
						vod_state:state
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						this.movieList=res.data.list
					}
				})
			},
			tabSelect3(index,item) {
				var that = this
				this.TabCur3 = index
				year=item
				uni.request({
					url: 'http://221.234.36.126:82/api.php/Vod/ajax_video',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						type_id_1: typeid1,
						type_id:typeid,
						limit:limit,
						order:order,
						vod_extend_area:area,
						vod_extend_year:year,
						vod_state:state
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						// console.log(res.data.list)
						this.movieList=res.data.list
					}
				})
			},
			tabSelect4(index,item) {
				var that = this
				this.TabCur4 = index
				typeid=item.type_id
				// console.log(typeid)
				uni.request({
					url: 'http://221.234.36.126:82/api.php/Vod/ajax_video',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						type_id_1: typeid1,
						type_id:typeid,
						limit:limit,
						order:order,
						vod_extend_area:area,
						vod_extend_year:year,
						vod_state:state
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						// console.log(res)
						this.movieList=res.data.list
					}
				})
			},
			tabSelect5(index,item) {
				var that = this
				this.TabCur5 = index
				state=item.state
				uni.request({
					url: 'http://221.234.36.126:82/api.php/Vod/ajax_video',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						type_id_1: typeid1,
						type_id:typeid,
						limit:limit,
						order:order,
						vod_extend_area:area,
						vod_extend_year:year,
						vod_state:state
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						// console.log(res.data.list)
						this.movieList=res.data.list
					}
				})
			}
			
		}
	}
</script>

<style>
	@import url("drama.css");
</style>
